<template>
  <Form ref="target" :validation-schema='mySchema' v-slot='{errors}' autocomplete="off" class="xtx-form">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <Field :class="{err:errors.account}"
         v-model="formData.account"
         name='account'
         class="input"
         type="text" placeholder="请输入用户名" />
      </div>
      <div class="error" v-if="errors.account">{{errors.account}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field
        :class="{err:errors.mobile}"
        v-model="formData.mobile"
        name='mobile' class="input"
         type="text" placeholder="请输入手机号" />
      </div>
      <div class="error" v-if="errors.mobile">{{errors.mobile}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field
        :class="{err:errors.code}"
         v-model="formData.code"
          name='code' class="input"
           type="text" placeholder="请输入验证码" />
        <span class="code" @click="send">{{time===0 ? '发送验证码':`${time}秒后发送`}}</span>
      </div>
      <div v-if="errors.code" class="error">{{errors.code}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field
        :class="{err:errors.password}"
         v-model="formData.password"
         name='password'
         class="input" type="password" placeholder="请输入密码" />
      </div>
      <div v-if="errors.password" class="error">{{errors.password}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field
        :class="{err:errors.rePassword}"
        v-model="formData.rePassword"
        name='rePassword'
        class="input" type="password" placeholder="请确认密码" />
      </div>
      <div v-if="errors.rePassword" class="error">{{errors.rePassword}}</div>
    </div>
    <a href="javascript:;" class="submit" @click="submit">立即提交</a>
  </Form>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { userQQPatchCode } from '@/api/user'
import { useCountdown } from '@/compositions'
import { Form, Field } from 'vee-validate'
import { ref, reactive } from 'vue'
import { mobile, code, accountApi as account, password, rePassword } from '@/utils/validate'
import Message from '@/components/message'
export default {
  name: 'CallbackPatch',
  components: { Form, Field },
  props: { unionId: { type: String, required: true } },
  setup (props) {
    const target = ref(null)
    // 表单数据对象
    const formData = reactive({
      account: null,
      mobile: null,
      code: null,
      password: null,
      rePassword: null
    })
    // 表单校验规则
    const mySchema = {
      account: account,
      mobile: mobile,
      code: code,
      password: password,
      rePassword: rePassword
    }

    // 发送验证码
    const { start, time } = useCountdown()
    const send = () => {
      // 验证手机号
      if (mobile(formData.mobile) !== true) {
        return
      }
      if (time.value !== 0) {
        return
      }
      // 调用api发送验证码
      userQQPatchCode(formData.mobile).then(data => {
        console.log('userQQPatchCode', data)
        Message({ type: 'success', text: '验证码已发送' })
        start(60)
      }).catch(err => {
        console.log(err)
        Message({ type: 'error', text: err.response.data.message })
      })
    }
    const store = useStore()
    const router = useRouter()
    const userQQPatchLogin = async () => {
      const obj = {
        unionId: props.unionId,
        account: formData.account,
        mobile: formData.mobile,
        code: formData.code,
        password: formData.password,
        rePassword: formData.rePassword
      }
      try {
        await store.dispatch('user/userQQPatchLogin', obj)
        await store.dispatch('cart/mergeLocalCart')
        Message({ type: 'success', text: 'QQ完善信息成功' })
        // 2. 跳转到来源页或者首页
        router.push('/')
      } catch (error) {
        console.dir('完善信息失败---', error)
        Message({ type: 'error', text: '完善信息失败' })
      }
    }
    // 手动兜底
    const submit = () => {
      target.value.validate().then(valid => {
        if (valid) {
          userQQPatchLogin()
        }
      })
    }
    return { target, formData, mySchema, submit, send, time }
  }
}
</script>

<style scoped lang='less'>
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
